<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Element UI CSS -->
	<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
	<!--本地CSS-->
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/element.css">
	<title>用户详情</title>
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
</head>
<body>
<div id="app">
	<el-container>

		<el-header>
			<el-menu mode="horizontal" router>
				<el-menu-item index="/">
					<strong class="text-primary">协同会议平台</strong>
				</el-menu-item>
				<el-menu-item style="float: right;" @click="logout">退出</el-menu-item>
			</el-menu>
		</el-header>


		<el-container>
			<el-aside width="200px">


				<el-row class="sidebar-header" type="flex" align="middle">
					<div class="demo-image__preview">
						<a href="user_look.html">
							<el-avatar style="width: 60px; height: 60px" src="img/avatar-6.jpg"></el-avatar>
						</a>
					</div>
					<div>
						<span style="margin-left:10px;font-size: 12px;font-weight: bold">小灰</span><br>
						<span style="margin-left:10px;font-size: 12px;font-weight: bold">研发部</span>
					</div>
				</el-row>


				<el-menu :default-openeds="['1', '2','3']">
					<el-menu-item index="1">
						<a href="home.html">
							<i class="el-icon-house"></i>
							<span slot="title">主页</span>
						</a>
					</el-menu-item>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-user"></i>
							<span>用户列表</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="2-1"><a href="user.html">查看用户</a></el-menu-item>
							<el-menu-item index="2-2"><a href="my_user.html">我关注的用户</a></el-menu-item>
							<el-menu-item index="2-3"><a href="article.html">发布文章</a></el-menu-item>
							<el-menu-item index="2-4"><a href="article_collect.html">我的收藏</a></el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-office-building"></i>
							<span>部门列表</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="3-1"><a href="department.html">全部部门</a></el-menu-item>
							<el-menu-item index="3-2"><a href="meeting.html">会议系统</a></el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-main>
				<h2>用户详情</h2>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="avatar-block">
							<el-upload
									class="avatar-uploader"
									action="https://jsonplaceholder.typicode.com/posts/"
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload">
								<el-avatar :size="150" v-if="imageUrl" :src="imageUrl" class="avatar"></el-avatar>
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<p class="followers"><strong>关注数：</strong>52</p>
							<p class="views"><strong>被看数：</strong>1168</p>
							<br><br>
						</div>
					</el-col>
					<el-col :span="20">
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="用户名">
								<el-input v-model="form.name" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="真实姓名">
								<el-input v-model="form.relname" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="所属部门">
								<el-input v-model="form.dept" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="电话">
								<el-input v-model="form.tel" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="年龄">
								<el-input v-model="form.age" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="性别">
								<el-radio-group v-model="form.sex" :disabled="true">
									<el-radio label="男"></el-radio>
									<el-radio label="女"></el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="注册时间">
								<el-input v-model="form.registertime" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="登录时间">
								<el-input v-model="form.logintime" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="是否私密">
								<el-checkbox-group v-model="form.type">
									<el-checkbox label="是否私密" name="type" :disabled="true"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>

			</el-main>
		</el-container>

		<el-row type="flex" justify="center">
			<p>&copy; 2025.Company <a href="#">协同会议平台</a></p>
		</el-row>
</div>

<!-- Vue and Element UI JS -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    name: '中通动力',
                    relname: '中通动力',
					dept:'研发部',
                    tel: '020-12345678',
                    age: 20,
                    sex: '男',
                    registertime:'2025-1-1 09:30:00',
                    logintime:'2025-1-1 09:32:00',
                    type:false
                },
                imageUrl: 'img/avatar-6.jpg'
            }
        },
        methods: {
            logout() {
                // Implement logout functionality here
                window.location.href = "index.html";
            },
            selectFile() {
                this.$refs.fileInput.click();
            },
            onFileChange(event) {
                const file = event.target.files[0];
                if (file) {
                    this.$message('上传成功');
                    // Here you can implement the file upload logic
                }
            },
            saveChanges() {
                // Implement save changes functionality here
            },
            onSubmit() {
                console.log('submit!');
                window.location.href = "user_look.html";
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    });
</script>
<style>
	.avatar-block {
		text-align: center;
	}
	.avatar-img {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		cursor: pointer;
	}
	.followers, .views {
		margin-top: 15px;
	}
	.demo-table-expand {
		font-size: 0;
	}
	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
</body>
</html>